<!DOCTYPE html>
<html>
<head>
    <title>北京站网格化系统</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Fonts -->
    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-switch.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/checkbox3.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/dataTables.bootstrap.css">
    <!-- <link rel="stylesheet" type="text/css" href="../lib/css/select.bootstrap.min.css"> -->
    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.datetimepicker.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/validform.min.css">
    <!-- CSS App -->
    <link rel="stylesheet" type="text/css" href="../lib/css/common/style.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/common/themes/flat-blue.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/common/newstyle.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/zc-common.css">

    <!--  -->
    <link rel="stylesheet" type="text/css" href="../lib/css/baseCommon.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/zc-common.css">
    <link rel="stylesheet" type="text/css" href="../lib/js/jquery-treegrid-master/jquery.treegrid.css">
</head>

<body class="flat-blue">
    <div class="app-container expanded">
        <div class="row content-container">
            <nav class="navbar navbar-default navbar-fixed-top navbar-top">
                <div class="container-fluid app-header">
                    <div class="navbar-header">
                        <button type="button" class="navbar-expand-toggle fa-rotate-90">
                            <i class="fa fa-bars icon"></i>  
                        </button>
                        <top-nav></top-nav>
                    </div>
                    <right-info></right-info>
                </div>
            </nav>
            <div class="side-menu-wrap">
                <side-menu></side-menu>
            </div>
            <!-- Main Content -->
            <div class="container-fluid">
                <div class="side-body padding-top">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="card card_list">
                                <div class="elm-wrap nav">
                                    <button type="button" class="btn btn-info" onclick="editing('trainstation')">添加站名</button>
                                    <form class="form-inline navbar-right mgr0">
                                        <div class="form-group">
                                          <label for="search_name">站名：</label>
                                          <input type="text" id='search_name' class="form-control search_name" placeholder="请输入站名">
                                        </div>
                                        <button type="button" class="btn btn-info" onclick="searching('trainstation')"  style="margin-left:10px">搜索</button>
                                      </form>
                                </div>
                                <div class="elm-wrap">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <table class="table table-striped stationtable" cellspacing="0" width="100%">
                                                <thead>
                                                    <tr>
                                                        <th>站名</th>
                                                        <th>操作</th>
                                                    </tr>
                                                </thead>
                                                <tfoot>
                                                    <tr>
                                                        <th>站名</th>
                                                        <th>操作</th>
                                                    </tr>
                                                </tfoot>
                                                <tbody>        
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div> 
                            </div>
                            <div class="card card_edit">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <form class="form-horizontal devicetypevue" style="margin-top:30px">
                                            <div class="form-group">
                                                <label for="type_name" class="col-sm-3 control-label">设备类型名称： </label>
                                                <div class="col-sm-9">
                                                    <input type="text" class="form-control type_name" id="type_name" name="type_name" datatype="*" errormsg="请填写正确的设备类型" nullmsg="设备类型是必填的" placeholder="请输入设备类型" v-model="info.type_name">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="dep" class="col-sm-3 control-label">设备车间： </label>
                                                <div class="col-sm-9">
                                                    <input id="depid" name="depid" class="depid" type="hidden" >
                                                    <div class="departSelect">
                                                        <input type="text" class="form-control tagselect dep" id="dep" placeholder="请选择设备车间" />
                                                        <div id="deptree" class="groudtree">
                                                    
                                                        </div>    
                                                    </div>    
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="isopen" class="col-sm-3 control-label">是否在网格中显示：</label>
                                                <div class="col-sm-9">
                                                    <div class="radio3 radio-check radio-blue radio-inline">
                                                        <input type="radio" id="radio4" v-model="info.isshow" name="post_type" value="1">
                                                        <label for="radio4">
                                                            是
                                                        </label>
                                                    </div>
                                                    <div class="radio3 radio-check radio-blue radio-inline">
                                                        <input type="radio" id="radio5" v-model="info.isshow" name="post_type" value="0">
                                                        <label for="radio5">
                                                            否
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-sm-offset-3 col-sm-9">
                                                    <button type="button" class="btn btn-info edited" onclick="uploadData('devicetype')">确认</button>
                                                    <button type="button" class="btn btn-default edit_cancel">取消</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    
                                </div>
                                
                            </div> 
                        </div>   
                    </div>
                </div>
            </div>
        </div>
        <footer class="app-footer">
            <div class="wrapper">
                
            </div>
        </footer>
        <div class="modal fade" id="modalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">添加站名</h4>
                    </div>
                    <div class="modal-body">
                        <div class="" style="padding:5px;">
                            <form class="form-horizontal trainstaionform ss_form">
                                    <div class="form-group">
                                        <label for="" class="col-sm-2 control-label">站名：</label>
                                        <div class="col-sm-10">
                                            <input type="text" name="stationname" class="form-control stationname" id="stationname" placeholder="请输入站名" datatype="*" errormsg="请填写正确的站名" nullmsg="站名是必填的">
                                            <span class='Validform_checktip' /> 
                                        </div>
                                    </div>
                                </form>
                        </div>    
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-info" onclick="uploadData('trainstation')">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="modalDel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">删除</h4>
                    </div>
                    <div class="modal-body">
                        确定删除？
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default cancel" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-info deling">确认</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="modalTips" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel3">提示</h4>
                    </div>
                    <div class="modal-body">
                        温馨提示
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- Javascript Libs -->
<script type="text/javascript" src="../lib/js/jquery.min.js"></script>
<script type="text/javascript" src="../lib/js/common/base.js"></script>
<script type="text/javascript" src="../lib/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../lib/js/bootstrap-switch.min.js"></script>
<script type="text/javascript" src="../lib/js/jquery.matchHeight-min.js"></script>
<script type="text/javascript" src="../lib/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../lib/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../lib/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="../lib/js/depchoice/edep_plugin.js"></script>
<script src="../lib/js/ztreeJs.js" type="text/javascript"></script>
<script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
<script type="text/javascript" src="../lib/js/datetimepicker.js"></script>
<script type="text/javascript" src="../lib/js/validform.js"></script>
<script type="text/javascript" src="../lib/js/vue.js"></script>
<!-- <script type="text/javascript" src="../lib/js/ace/ace.js"></script>
<script type="text/javascript" src="../lib/js/ace/mode-html.js"></script>
<script type="text/javascript" src="../lib/js/ace/theme-github.js"></script> -->
<!-- Javascript -->
<script type="text/javascript" src="../lib/js/common/app.js"></script>
<script>
    navData.accNav1 = 'task'
    navData.nav1Name = '作业管理'
    navData.accNav2 = 'task-train'
    navData.accNav3 = '13'
    var navVue = new Vue({
        el:'.side-menu-wrap' 
    })
    var navTopVue = new Vue({
        el:'.app-header' 
    })
    var Info={}
    //翻页条件
    var _upData={
        'page':1,
        'count':10
    }
    var _dataTable = $('.stationtable').DataTable({
        "dom": 'rt<"bottom"ip<"clear">>',
        language:{
            url: '../lib/js/cn_lang.json'
        },
        serverSide:true,
        ajax:function(data,callback,settings){
            //console.log('data',data)
            $('.table').loading('open','加载中。。。')
            // console.log(data)
            _upData.page = (data.start / data.length)+1;//当前页码
            _upData.count = data.length;//每页个数
            console.log(_upData)
            $.ajax({
                url:serverUrl.base+serverUrl.taskTrainStation+'station_list',
                type:"POST",
                data:_upData,
                cache: false,
                dataType:"json",
                success:function(res){
                    _noEditElm = true
                    if(res.code == 0){
                        // $('.tablepagewrap').html(res.result_page)
                        res.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                        res.recordsTotal = res.total;//返回数据全部记录
                        res.recordsFiltered = res.total;//后台不实现过滤功能，每次查询均视作全部结果
                        callback(res)
                    }        
                },
                complete:function(res){
                    $('body').loading('close')
                    $('.table').loading('close')
                },
                error:function(res){
                    
                }    
            })
        },
        // ajax:{
        //     url:serverUrl.base+serverUrl.taskTrainStation+'station_list',
        //     data:{_:Math.random()},
        //     type:'post',
        //     complete:function(){
        //         //alert(1)
        //         $('body').loading('close')
        //     }
        // },
        select:'multi',
        ordering:false,
        buttons:['colvis','excel', 'print','selectAll'],
        columns:[
            { "data": "station_name",defaultContent:'' },
            {
                "data":null,render:function(data, type, row, meta){
                    return '<a onclick="editing(\'trainstation\',this)" href="javascript:void(0)">编辑</a> <a onclick="delingModal(\'trainstation\',this)" href="javascript:void(0)">删除</a>'
                },defaultContent:'',width:'100px'
            }
            
        ]  
    })
    _dataTable.on('select.dt',function(){
        var selected = _dataTable.rows( { selected: true } ).count()
        var _rows =  _dataTable.rows().count()
        $('.dtcount').text(selected)
        _rows == selected?$('.datatable-checkall').addClass('selected'):$('.datatable-checkall').removeClass('selected')
    })
    _dataTable.on('deselect.dt',function(){
        var selected = _dataTable.rows( { selected: true } ).count()
        $('.dtcount').text(selected)
        $('.datatable-checkall').removeClass('selected')
    })
    $('.datatable-checkall').click(function(){
        $(this).toggleClass('selected')
        if($(this).hasClass('selected')){
            _dataTable.rows().select()
        }else{
            _dataTable.rows().deselect()
        }
        
    })
    //搜索
    function searching(name){
        switch(name){
            case 'trainstation':
                var _upData={
                    'station_name':$('.search_name').val()
                }
                _dataTable.settings()[0].ajax.data=_upData
                _dataTable.ajax.reload()
            break;
        }
    } 
    //编辑
    function editing(name,elm){
        Info={}
        switch(name){
            case 'trainstation':
            var $modalEdit = $("#modalEdit")
                Info={
                    station_id:'',
                    station_name:''
                }
                if(arguments[1]){
                    Info = $.extend({},Info,_dataTable.row($(elm).parents('tr')).data())
                }else{

                }
                $("#modalEdit").find('input[name=stationname]').val(Info.station_name)
                $("#modalEdit").modal()
            break;
            default:
                $('.card_edit').show()
                $('.card_list').hide()
                $("#modalEdit").modal('hide')
                Info = {}
            break;
        }
        if(arguments[1]){
            Info.row = $(elm).parents('tr')
        }
    }
    //删除
    function delingModal(name,elm){
        var _text={
            tit:'删除',
            body1:'确定删除吗？',
            body2:'删除出现问题',
            btn1:'确定',
            cbtn1:'取消',
            cbtn2:'知道了',
            deltit1:'删除成功',
            deltit2:'删除失败',
            delbody1:"删除成功！",
            delbody2:"出现问题",
        },_datas={
            id:'',
            data:{},
            url:''
        }
        switch(name){
            case 'trainstation':
                if(arguments[1]){
                    Info.row = $(elm).parents('tr')
                    _datas.data={
                        station_id:_dataTable.row(Info.row).data().station_id
                    }
                    _text.body1 = '确定删除该站名么？'
                }else{
                }
                _datas.url = serverUrl.base+serverUrl.taskTrainStation+'del_station'
                _text.tit = '删除站名'
                $('#modalDel').find('.modal-title').text(_text.tit)
                $('#modalDel').find('.modal-body').text(_text.body1)
                $('#modalDel').modal()
            break;
            default:
            break;
        }
        $('.deling').off('click').on('click',function(){
            $.post(_datas.url,_datas.data,function(res){
                $('#modalDel').modal('hide')
                if(res.code == 0){
                    setTimeout(function(){
                        $('#modalTips').find('.modal-body').text(_text.deltit1)
                        $("#modalTips").modal()    
                    },500)
                    if(Info.row){
                        _dataTable.row(Info.row).remove().draw(false)
                    }else{
                        _dataTable.rows({selected:true}).remove().draw(false)
                    }
                    
                }else{
                    setTimeout(function(){
                        if(res.info != ''){
                            _text.deltit2 = res.info  
                        }
                        $('#modalTips').find('.modal-body').text(_text.deltit2)
                        $("#modalTips").modal()    
                    },500)
                }
            },'json').error(function(res){
                $('#modalDel').modal('hide')
                setTimeout(function(){
                    $('#modalTips').find('.modal-body').text(_text.delbody2)
                    $("#modalTips").modal()    
                },500)
            }).complete(function(){
                $('#modalDel').modal('hide')
            })
        })
        
    }     
    //提交 
    function uploadData(name){
        switch(name){
            case 'trainstation':
            if(!myValidform.check()){
                return false
            }
            var _dataTableRow=_dataTable.row(Info.row)

            var upData={
                station_id:Info.station_id,
                station_name:$("#modalEdit").find('input[name=stationname]').val()
            }
            console.log(upData)
            //return false
            $('#modalEdit').loading('open')
            $.ajax({
                url:serverUrl.base+serverUrl.taskTrainStation+'edit_station',
                type:"POST",
                data:upData,
                dataType:"json",
                success:function(res){
                    if(res.code == 0){
                        //更新表格
                        // _dataTable.settings()[0].ajax.data={'department_id':Info.department_id}
                        _dataTable.ajax.reload()  
                        $("#modalTips").find('.modal-title').text('成功') 
                        var _info=''
                        if(_dataTableRow){
                            _info='站名修改成功'
                            _dataTable.ajax.reload(function(){},false)  
                        }else{
                            _info='站名添加成功'
                            _dataTable.ajax.reload()  
                        }
                        $("#modalTips").find('.modal-body').text(_info)
                    }else if(res.code == '2'){
                        $("#modalTips").find('.modal-title').text('出现问题') 
                        $("#modalTips").find('.modal-body').text(res.info)
                    }
                    setTimeout(function(){
                        $("#modalTips").modal();
                        $("#modalTips").find('.modal-body').text(res.info)    
                    },500)
                    Info = {}
                    $('.card_edit').hide()
                    $('.card_list').show()
                },
                complete:function(res){
                    $('#modalDel').modal('hide');
                    $("#modalEdit").modal('hide')
                    $('#modalEdit').loading('close')
                },
                error:function(res){
                    $("#modalTips").find('.modal-title').text('出现问题') 
                    $("#modalTips").find('.modal-body').text(res.info)
                    setTimeout(function(){
                        $("#modalTips").modal()    
                    },500)
                }    
            })
            break;
        }
    }
    //取消
    $('.edit_cancel').on('click',function(){
        Info.row && _dataTable.row(Info.row).deselect()
        Info={}
        $('.card_edit').hide()
        $('.card_list').show()
    })
    var myValidform = $(".ss_form").Validform({
        tiptype:3,
        datatype:{
            putso:function(gets,obj,curform,regxp){
                /*参数gets是获取到的表单元素值，
				  obj为当前表单元素，
				  curform为当前验证的表单，
				  regxp为内置的一些正则表达式的引用。*/
                var _checkpwrap = obj.parents('.checkpwrap')
                var _type = _checkpwrap.find('.checkp').val()
                var _userid = _checkpwrap.find('.userid').val()
                var _post = _checkpwrap.find('.post').val()
                var reg1=regxp["*"],
					reg2=/[\d]{7}/,
					mobile=curform.find(".mobile");
                if(obj){
                    if(_type == '1'){
                        //人
                        //console.log(_userid)
                        if(reg1.test(_userid)){return true;}
                    }else if(_type == '3'){
                        //岗位
                        if(reg1.test(_post)){return true;}
                    }
                }
                return false;
            },
            ztreegroup:function(gets,obj,curform,regxp){
                console.log(gets)
                if(gets == ''){
                    return false
                }else{
                }
            },
            select2:function(gets,obj,curform,regxp){
                if(gets.length ==0){
                    obj.siblings('.select2').find('.select2-selection').css('borderColor','red')
                    return false
                }else{
                    obj.siblings('.select2').find('.select2-selection').css('borderColor','#ccc')
                }
            }
        }
    });
    // $(document).on('click','.treegroup',function(){
    //     showsDeptWin(null,'select','dep','depid','emp','single',myValidform);
    // })
   
    function newSelectDeviceType(){
        setTimeout(function(){
            $(document).off('click','.dep').on('click','.dep',function(){
                showsDeptWin('deptree','select','dep','depid','dep','single');
            }) 
        },0)
    }
    
    $('.treegroup').off('click').on('click',function(){
        showsDeptWin('groudtree','select','treegroup','search_deptid','dep','single');
    }) 
</script>
</body>

</html>
